useCallback

🧑🏻‍💻 useCallback

---

useCallback 은 리렌더링 사이에 함수 정의를 캐시할 수 있게 해주는 React 훅이다.

✅ useCallback 문법

const cachedFn = useCallback(fn, dependencies)

• fn 는 캐시하려는 함수 값이다. 어떤 인자도 받을 수 있고 어떤 값이라도 반환할 수 있다.
• dependencies는 fn 코드 내에서 참조된 모든 반응형 값의 배열이다.
• 초기 렌더링에서 useCallback은 전달한 fn 함수를 호출이 아닌 반환한다.

✅ 언제 사용하는지

• 하위 컴포넌트로 handle 함수를 메모라이제이션 할 때 (modal open과 같은 handler 함수)
• 커스텀 훅을 작성할 때

✅ 주의사항

• 렌더링 로직을 순수하게 유지해야 한다.
• 불필요한 의존성을 제거해야 한다.

🧑🏻‍💻 활용 및 생각할 거리

---

✅ useMemo와 useCallback 의 차이

• useMemo는 호출한 함수의 결과를 캐시한다.
• useCallback은 함수 자체를 캐시한다. useMemo와 달리, 제공한 함수를 호출하지 않는다.
• 코드로 생각하면 다음과 같다.

function useCallback(fn, dependencies) {
  return useMemo(() => fn, dependencies);
}

✅ useCallback에서 state 업데이트하는 방법

• 업데이터 함수를 사용한다.

• 🛑 업데이터 함수 사용 전

// 업데이터 함수 사용 전

function TodoList() {
  const [todos, setTodos] = useState([]);

  const handleAddTodo = useCallback((text) => {
    const newTodo = { id: nextId++, text };
    
    setTodos([...todos, newTodo]);
  }, [todos]);
  // ...

• ✅ 업데이터 함수 사용 후

// 업데이터 함수 사용 후

function TodoList() {
  const [todos, setTodos] = useState([]);

  const handleAddTodo = useCallback((text) => {
    const newTodo = { id: nextId++, text };

        // todos에 대한 의존성이 필요하지 않다.
    setTodos(todos => [...todos, newTodo]);
  }, []);
  // ...